<template>
	<view class="container">
		<navBar isBack title="所在地区"></navBar>
		<view class="title df-ar">
			<view class="left">中国大陆</view>
			<view class="right">国际澳台</view>
		</view>
		<view class="content">
			<view class="content-top df-bt">
				<view class="content-left">当前：桂林·象山区</view>
				<view class="content-right df-ct">
					<text>切换县区</text>
					<text class="iconfont icon-sanjiaoshang"></text>
				</view>
			</view>
			<view class="content-center">

				<button type="default" v-for="(item,index) in list" :key="index" class="btn">{{item}}</button>

			</view>
		</view>
		<!-- <van-index-bar @tap="handleSelect">
		  <view>
		    <van-index-anchor index="A" />
		    <van-cell title="安庆"/>			
		    <van-cell title="澳门" />
		    <van-cell title="安州区" />
		  </view>		
		  <view>
		    <van-index-anchor index="B" />
		    <van-cell title="北京" />
		    <van-cell title="保定" />
		    <van-cell title="白山" />
			<van-cell title="北京" />
			<van-cell title="保定" />
			<van-cell title="白山" />
			<van-cell title="北京" />
			<van-cell title="保定" />
			<van-cell title="白山" />
			<van-cell title="北京" />
			<van-cell title="保定" />
			<van-cell title="白山" />
		  </view>
		</van-index-bar> -->
		<u-index-list :scrollTop="scrollTop">
				<view v-for="(item, index) in listArr" :key="index">
					<u-index-anchor :index="item.key" />
					<view class="list-cell" v-for="(item1,index1) in item.list" :key="index1">
						{{item1}}
					</view>

				</view>
		</u-index-list>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					"全城","七星区","七星区","七星区","七星区","七星区","七星区","七星区","七星区",
				],
				indexList:[
					"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				],
				scrollTop: 0,
				listArr:[]
			}
		},
		onLoad() {
			this.getProvice()
			this.getIndexList()
		},
		methods:{
			handleSelect(e){
				console.log(e,555)
			},
			// 获取地区列表
			getProvice(){
				this.$api.getProviceList().then(res=>{
					console.log(res,'地区列表')
					if(res.code==1){
						let provice = res.data?res.data:[]
						
					}
				})
			},
			getIndexList(){
				this.indexList.map(item=>{
					this.listArr.push({
						key:item,
						list:['上海','北京']
					})
				}) 
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="less">
	.container{
		height: 100%;
		.title{
			padding: 32rpx 0;
			.left{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 600;
				line-height: 40rpx;
				color: #DBA954;
			}
			.right{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #A0A0A0;
			}
		}
		.content{
			padding: 42rpx 28rpx;
			background-color: #fff;
			.content-top{
				margin-bottom: 38rpx;
				.content-left{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #505050;
				}
				.content-right{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 40rpx;
					color: #A0A0A0;
					.icon-sanjiaoshang{
						font-size: 40rpx;
					}
				}
			}
			.content-center{
				padding-bottom: 38rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
				.btn{
					width: 216rpx;
					height: 72rpx;
					background: #FFFFFF;
					// border: 1rpx solid #D8D8D8;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 72rpx;
					color: #505050;
					margin-bottom: 12rpx;
				}
			}
		}
		.list-cell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				padding: 10px 24rpx;
				overflow: hidden;
				color: #323233;
				font-size: 14px;
				line-height: 24px;
				background-color: #fff;
			}
	}
</style>
